<template>
  <view>
    <view v-for="(item, index) in form.siteList" :key="index">
      <view class="card" style="height: 100%;position: relative;">
        <uni-section title="工作场所信息" type="line">
          <view class="formItem">
            <view class="label">场地名称</view>
            <input class="content" v-model="item.name" placeholder="请输入场地名称" />
          </view>

          <view class="formItem">
            <view class="label">工作场所地址</view>
            <input class="content" v-model="item.address" placeholder="请输入工作场所地址" />
          </view>

          <view class="formItem">
            <view class="label">建筑面积(平方米)</view>
            <input class="content" type="number" v-model="item.areaSize" placeholder="请输入建筑面积" />
          </view>

          <view class="formItem_doubleRow">
            <view class="title">产权证明或租赁合同(原件)
              <view class="titleTip">（产权证明或租赁合同需逐页扫描或拍照上传）</view>
            </view>
            <uni-file-picker fileMediatype="all" ref="imageValues" :value="listSelected" mode="grid" :limit="20"
              @select="select($event, index, 'securitiesFiles')" @progress="progress" @success="success" @fail="fail" />
          </view>
        </uni-section>
        <view class="delete" v-if="index > 0" @click="delImg(index)">删除</view>
      </view>
    </view>

    <view class="step_box_add" @click="changeAdd">
      <view class="step_box_add-img">
        <image :src="baseImgUrl + '/manage/add_copy.png'" mode=""></image>
      </view>
      <view class="step_box_add-span"> 新增工作场所信息 </view>
    </view>
  </view>
</template>
<script>
import { baseImgUrl, baseApiUrl } from "@/config.js";
let _ = require("lodash");
export default {
  data() {
    return {
      imgPath: "/common/upload",
      form: {
        siteList: [
          {
            name: null,
            address: null,
            areaSize: null,
            securitiesFiles: null,
          },
        ],
      },
      baseImgUrl: baseImgUrl,
      formObject: {
        address: null, // 工作场所地址
        areaSize: null, // 建筑面积
        name: null, // 场地名称
        securitiesFiles: null, // 产权证明或租赁合同
      },
      listSelected: [],
    };
  },
  methods: {
    // 获取上传状态
    select(e, index, key) {
      let size = e.tempFiles[0].size;
      if (size <= 1024 * 1024 * 20) {
        uni.uploadFile({
          url: baseApiUrl + this.imgPath, //仅为示例，非真实的接口地址
          filePath: e.tempFilePaths[0],
          name: "file",
          formData: {
            user: "test",
          },
          success: (uploadFileRes) => {
            let dist = JSON.parse(uploadFileRes.data);
            if (dist.code == 200) {
              this.form.siteList[index][key] = dist.fileName;
            } else {
              uni.showToast({
                title: "上传失败",
                icon: "none",
                duration: 2000,
              });
            }
          },
        });
      } else {
        this.$refs.imageValues[0].clearFiles();
        uni.showToast({
          title: "文件过大",
          icon: "none",
          duration: 2000,
        });
      }
    },
    // 获取上传进度
    progress(e) {
      console.log("上传进度：", e);
    },

    // 上传成功
    success(e) {
      console.log("上传成功");
    },

    // 上传失败
    fail(e) {
      console.log("上传失败：", e);
    },

    // 删除
    delImg(index) {
      uni.showModal({
        title: "提示",
        content: "确定要删除该工作场所？",
        cancelText: "取消",
        confirmText: "确认",
        success: (res) => {
          if (res.confirm) {
            this.form.siteList.splice(index, 1);
          }
        },
      });
    },
    //! 提供给父组件的校验方法，错误时返回表单名
    validateForm() {
      let result = true;
      const list = this.form.siteList;
      if (list.length !== 0) {
        for (let i = 0; i < list.length; i++) {
          // 如果表单字段为空时则返回校验失败
          const obj = list[i];
          for (const key in obj) {
            if (obj[key] === "") {
              result = "工作场所信息";
              break;
            }
          }
          if (result == "工作场所信息") {
            break;
          }
        }
      }
      return result;
    },
    // 新增租赁场地信息
    changeAdd() {
      let newList = _.cloneDeep(this.formObject);
      this.form.siteList.push(newList);
    },
  },
};
</script>
<style lang="less" scoped>
.delete {
  float: right;
  font-size: 30rpx;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #d50000;
  line-height: 36rpx;
  position: absolute;
  right: 30rpx;
  top: 30rpx
}

.step_box_add {
  width: 100%;
  height: 80rpx;
  line-height: 80rpx;
  background-color: #ffffff;
  display: flex;
  justify-content: center;
  flex-direction: row;
  margin-top: 24rpx;

  &-img {
    width: 20rpx;
    height: 20rpx;

    image {
      width: 100%;
      height: 100%;
    }
  }

  &-span {
    font-size: 30rpx;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #335ac6;
    margin-left: 17rpx;
  }
}
</style>
